import React, { Component } from 'react';
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { Rate, Button } from 'antd'
import { removeCart } from '../cart/store/actionCreators'
import { addCart } from '../home/store/actionCreators'
import { withRouter } from 'react-router-dom'
import {
  TeacherBannerWrapper,
  TeacherInfo,
  CourseWrapper
} from './style.js'

class TeacherCom extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    let teacherId = this.props.match.params.teacherId
    if(teacherId) {
      this.props.getInfo({
        teacherId
      })
    }
  }

  // 获取url参数
  // getQueryStr(name)
  // {
  //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 
  //     var r = window.location.search.substr(1).match(reg);
  //     if (r != null && r != undefined) {
  //       return unescape(r[2]);
  //     }
  //     return null;
  // }

  addCart(params) {
    let status = params.get('shoppingStatus')
    let id = params.getIn(['lesson' ,'id'])
    if(status === '已经购买') {
      this.props.history.push({
        pathname: '/courseitem/' + id
      })
      // window.location.href='/courseitem?id=' + id
    }else if(status === '已加入购物车'){
      this.props.removeCart({
        lessonId: id
      })
      this.props.getInfo({
        teacherId:  this.props.match.params.teacherId
      })
    }else {
      this.props.addCart(id)
      this.props.getInfo({
        teacherId:  this.props.match.params.teacherId
      })
    }
  }

  toItem(obj) {
    let id = obj.get('lessonId')
    this.props.history.push({
      pathname: '/courseitem/' + id
    })
    // window.location.href='/courseitem?id=' + id
  }

  renderTeacher() {
    const info = this.props.info
    return (
      <div style={{paddingBottom: '30px'}}>
        <TeacherBannerWrapper>
          <TeacherInfo>
            <img src={info.get('photo')} />
            <div className="info">
              <h3>{info.get('name')}</h3>
              <p>{info.get('userType') === 'teacher' ? '老师': '学生'} | {info.get('school')}</p>
              <p>{info.get('description')}</p>
            </div>
          </TeacherInfo>
        </TeacherBannerWrapper>
        <CourseWrapper style={{minHeight: (document.body.clientHeight - 614 + 'px')}}>
          <div className="clearfix">
            <p className="title">授课</p>
            <ul className="video-list">
              {
                this.props.lessons ? this.props.lessons.map(item=> {
                  return (
                    <li>
                      <img src={item.get('coverUrl')} onClick={this.toItem.bind(this, item)}/>
                      <div className="video-info">
                        <p>课程时间：{item.get('lessonDate')}</p>
                        <p className="price">￥{item.get('lessonPrice')}</p>
                        <Button type="primary"  onClick={this.addCart.bind(this, item)}>{item.get('shoppingStatus') === '已经购买' ?  '去观看': (item.get('shoppingStatus') === '已加入购物车' ? '移除购物车': '加入购物车')}</Button>
                      </div>
                    </li>
                  )
                }) : ''
              }
            </ul>
          </div>
          <div>
            <p className="title">评分</p>
            <Rate allowHalf disabled defaultValue={this.props.score}/>
            <span style={{color: 'red', marginLeft: '20px', fontWeight: 'bold', fontSize: '18px'}}>{this.props.score}</span>分
          </div>
        </CourseWrapper>
      </div>
    ) 
  }

  render() {
    return (
      <div style={{backgroundColor: 'rgb(238, 238, 238)'}}>
        {
          this.props.info ? this.renderTeacher() : ''
        }
      </div>
    )
  }
}

const mapState = (state) => {
  // console.log('state', state.getIn(['teacher', 'teacherInfo', 'teacher']))
  return {
    info: state.getIn(['teacher', 'teacherInfo', 'teacher']),
    score: state.getIn(['teacher', 'teacherInfo', 'eval']),
    lessons: state.getIn(['teacher', 'teacherInfo', 'lessons'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    getInfo(params) {
      dispatch(actionCreators.getTeacherInfo(params))
    },
    addCart(lessonId) {
      dispatch(addCart({
        lessonId
      }))
    },
    removeCart(params) {
      dispatch(removeCart(params))
    }

  }
}


export default connect(mapState, mapDispatch)(withRouter(TeacherCom))